<template>
  <div>
    <div class="CircleView">
      <div class="container">
        <div class="headbigbox">
          <div class="headbox">
            <div class="header">
              <div class="head">
                <a class="con" href="">圈子</a>
                <a href="">关注</a>
                <a href="">书摘</a>
              </div>
            </div>
          </div>
        </div>

        <div class="contentbox">
          <div class="title">
            <p>最新短文</p>
          </div>
          <div class="mainbox">
            <div class="imgbox">
              <a href=""> <img src="../assets/img/藏书馆7_03.jpg" alt=""></a>
              <div class="textbox">
                <p>来自成长进阶互助社</p>
                <p>由小***发布<span>2022-09-21更新</span></p>
              </div>
            </div>
            <div class="txt">
              <p>加入</p>
            </div>
          </div>
          <span>重读《浮生六记》才懂：婚姻中让人绝望的从来不是贫穷</span>

          <div class="passagebox">
            <div class="passage">
              浮生若梦，为何几何？夫天地者，万物之逆旅。光阴者，百代之过客。而浮生若梦
              ，为欢几何？;--李白林语堂先生曾说：“陈云是

            </div>

            <div class="img">
              <img src="../assets/img/右图_03.jpg" alt="">
            </div>
          </div>


          <div class="img-box">
            <div class="dots">
              <a href=""><img src="../assets/img/find_ic_more.png" alt=""></a>
            </div>
            <div class="like-forward">
              <a href=""><img src="../assets/img/seek_icon_appreciate.png" alt=""></a>
              <a href=""><img src="../assets/img/share_gray.png" alt=""></a>
            </div>
          </div>

        </div>

        <div class="contentbox">
          <div class="title">
            <p>最新短文</p>
          </div>
          <div class="mainbox">
            <div class="imgbox">
              <a href=""> <img src="../assets/img/藏书馆7_03.jpg" alt=""></a>
              <div class="textbox">
                <p>来自成长进阶互助社</p>
                <p>由小***发布<span>2022-09-21更新</span></p>
              </div>
            </div>
            <div class="txt">
              <p>加入</p>
            </div>
          </div>
          <span>重读《浮生六记》才懂：婚姻中让人绝望的从来不是贫穷</span>

          <div class="passagebox">
            <div class="passage">
              浮生若梦，为何几何？夫天地者，万物之逆旅。光阴者，百代之过客。而浮生若梦
              ，为欢几何？;--李白林语堂先生曾说：“陈云是

            </div>

            <div class="img">
              <img src="../assets/img/右图_03.jpg" alt="">
            </div>
          </div>


          <div class="img-box">
            <div class="dots">
              <a href=""><img src="../assets/img/find_ic_more.png" alt=""></a>
            </div>
            <div class="like-forward">
              <a href=""><img src="../assets/img/seek_icon_appreciate.png" alt=""></a>
              <a href=""><img src="../assets/img/share_gray.png" alt=""></a>
            </div>
          </div>

        </div>


        <div class="contentbox">
          <div class="title">
            <p>最新短文</p>
          </div>
          <div class="mainbox">
            <div class="imgbox">
              <a href=""> <img src="../assets/img/藏书馆7_03.jpg" alt=""></a>
              <div class="textbox">
                <p>来自成长进阶互助社</p>
                <p>由小***发布<span>2022-09-21更新</span></p>
              </div>
            </div>
            <div class="txt">
              <p>加入</p>
            </div>
          </div>
          <span>重读《浮生六记》才懂：婚姻中让人绝望的从来不是贫穷</span>

          <div class="passagebox">
            <div class="passage">
              浮生若梦，为何几何？夫天地者，万物之逆旅。光阴者，百代之过客。而浮生若梦
              ，为欢几何？;--李白林语堂先生曾说：“陈云是

            </div>

            <div class="img">
              <img src="../assets/img/右图_03.jpg" alt="">
            </div>
          </div>


          <div class="img-box">
            <div class="dots">
              <a href=""><img src="../assets/img/find_ic_more.png" alt=""></a>
            </div>
            <div class="like-forward">
              <a href=""><img src="../assets/img/seek_icon_appreciate.png" alt=""></a>
              <a href=""><img src="../assets/img/share_gray.png" alt=""></a>
            </div>
          </div>

        </div>


      </div>
      <br>
      <br>
      <br>
    </div>

  </div>
</template>

<script>
export default {


}
</script>

<style lang="scss" scoped>
.CircleView {
  .container {
    background-color: #f6f6f6;

    .contentbox {
      &:nth-child(2) {
        margin-top: 74px;
        border-top: 13px solid #f6f6f6;
      }
    }


  }

  .headbigbox {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
  }

  .headbox {
    background-color: #fff;
    padding-bottom: 10px;

    .header {
      padding-top: 26px;

      .head {
        display: flex;
        padding-left: 16px;
        align-items: baseline;

        a {
          color: #a0abbe;
          margin-right: 16px;

          &.con {
            color: #000;
            font-size: 19px;
            padding-bottom: 10px;
            border-bottom: 4px solid #f5c265;
            font-weight: bold;
          }
        }
      }
    }
  }

  /* 内容 */
  .contentbox {
    background-color: #fff;
    padding-left: 20px;
    padding-right: 20px;

    .title {
      padding-top: 20px;
      padding-bottom: 20px;

      p {
        font-size: 20px;
        color: #0e1b33;
        font-weight: bold;
      }
    }

    .mainbox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      .imgbox {
        display: flex;

        a {
          img {
            width: 30px;
            height: 30px;
          }
        }

        .textbox {
          padding-left: 10px;
          display: flex;
          flex-direction: column;

          p {
            font-size: 12px;
            color: #a6b0c1;

            span {
              padding-left: 6px;
            }

            &:nth-child(1) {
              font-size: 16px;
              color: #0c1a31;
            }
          }
        }
      }

      .txt {
        p {
          padding-left: 10px;
          padding-right: 10px;
          padding-top: 2px;
          padding-bottom: 2px;
          border-radius: 12px;
          border: 2px solid #eaedef;
          color: #a4aec0;
          font-size: 10px;
          text-align: center;
        }
      }
    }

    &>span {
      font-size: 15px;
      color: #000;
      font-weight: bold;
    }

    .passagebox {
      display: flex;
      margin-top: 16px;

      .passage {
        font-size: 13px;
        color: #7e8795;
        height: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
      }

      .img {
        margin-left: 22px;

        img {
          width: 110px;
          height: 70px;
        }
      }
    }

    .img-box {
      display: flex;
      margin-top: 12px;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 22px;
      border-bottom: 1px solid #e6eaed;

      .dots {
        a {
          img {
            width: auto;
            height: 25px;
          }
        }
      }

      .like-forward {
        display: flex;

        a {
          &:nth-child(1) {
            img {
              width: 20px;
              height: 20px;
              margin-right: 60px;
            }
          }

          &:nth-child(2) {
            img {
              width: 20px;
              height: 20px;
            }
          }
        }
      }
    }
  }

  /* 底部 */
  .foot-box {
    width: 100%;
    position: fixed;
    bottom: -3px;
    background-color: #fff;
    padding-top: 4px;
    padding-bottom: 7px;
    box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.21);
  }

}
</style>